<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>MeteoCal - Edit Invitation</title>
	<link rel="stylesheet" type="text/css" href="${request.contextPath}/resources/css/main.css" />
    </h:head>
    <h:body>
        <p:layout fullPage="true">
            <p:layoutUnit position="north" size="60" resizable="false" closable="false" collapsible="false">
		<ui:include src="/includes/header.xhtml"/>
            </p:layoutUnit>
	    <p:layoutUnit position="center" class="content">
		<table>
		    <tr>
			<td style="vertical-align: middle">
			    <h1>#{inviteeController.selected.eventID.eventName}</h1>
			</td>
			<td style="vertical-align: middle">
			    (#{inviteeController.selected.eventID.eventPublicPrivate ? 'public' : 'private'}
			    #{inviteeController.selected.eventID.eventIndoorOutdoor ? 'indoor' : 'outdoor'} event)
			</td>
		    </tr>
		</table>
		<h:form>
		    <h:outputText value="#{inviteeController.selected.eventID.eventDate}" title="#{bundle.ViewEventTitle_eventDate}">
			<f:convertDateTime timeZone="GMT+1" pattern="MM/dd/yyyy" />
		    </h:outputText>
		    &nbsp;&nbsp;&nbsp;
		    <h:outputText value="#{inviteeController.selected.eventID.eventStartTime}" title="#{bundle.ViewEventTitle_eventStartTime}">
			<f:convertDateTime timeZone="GMT+1" pattern="hh:mm a" />
		    </h:outputText>
		    - 
		    <h:outputText value="#{inviteeController.selected.eventID.eventEndTime}" title="#{bundle.ViewEventTitle_eventEndTime}">
			<f:convertDateTime timeZone="GMT+1" pattern="hh:mm a" />
		    </h:outputText>
		    <br/>
		    <h:outputText value="#{inviteeController.selected.eventID.eventCity}" title="#{bundle.ViewEventTitle_eventCity}"/>
		    <br/>
                    <h:outputText value="#{inviteeController.selected.eventID.userEmail.userLastName}" title="LastName"/>&nbsp;&nbsp;&nbsp;
                    <h:outputText value="#{inviteeController.selected.eventID.userEmail.userFirstName}" title="FirstName"/>
		    <br/>
		    <h:outputText value="#{inviteeController.selected.eventID.userEmail}" title="#{bundle.ViewEventTitle_userEmail}"/>
		    <br/>
		    <br/>
		    <h2>Event Description</h2>
		    <br/>
		    <h:outputText value="#{inviteeController.selected.eventID.eventDesciption}" title="#{bundle.ViewEventTitle_eventDesciption}"/>
		    <br/>
		    <br/>
		    <h:outputText value="#{bundle.ViewEventLabel_eventNotification}"/>
		    <h:outputText value="#{inviteeController.selected.eventID.eventNotification? 'Cancellation':'On time'}" title="#{bundle.ViewEventTitle_eventNotification}"/>
		    <br/>
		    <br/>
		    <h2>Invitation</h2>
		    <h:panelGrid columns="2">
			<h:outputLabel value="Accept:" for="accepted" />
			<p:selectBooleanCheckbox id="accepted" value="#{inviteeController.selected.accepted}" />
                        <p:commandButton type="submit" value="Save" action="#{inviteeController.invitationUpdate}" ajax="false" />
		    </h:panelGrid>
		    <p:outputPanel>
			<h2>Guests</h2>
			<div class="multi-column-container align-top">
			    <h:panelGrid columns="2">
                                <h:dataTable value="#{eventController.getGuest(inviteeController.selected.eventID)}" var="item" border="0" cellpadding="2" cellspacing="0" rowClasses="jsfcrud_odd_row,jsfcrud_even_row" rules="all" style="border:solid 1px">
				    <h:column>
					<f:facet name="header">
					    <h:outputText value="Lastname"/>
					</f:facet>
					<h:outputText value="#{item.userEmail.userLastName}"/>
				    </h:column>

				    <h:column>
					<f:facet name="header">
					    <h:outputText value="Firstname"/>
					</f:facet>
					<h:outputText value="#{item.userEmail.userFirstName}"/>
				    </h:column>

				    <h:column>
					<f:facet name="header">
					    <h:outputText value="#{bundle.ListInviteeTitle_userEmail}"/>
					</f:facet>
					<h:outputText value="#{item.userEmail.userEmail}"/>
				    </h:column>

				</h:dataTable>
			    </h:panelGrid>
<!--			    <div style="margin-right: 10px">
				<h3>Invite more guests</h3>
				<p:inputText id="searchUserName" style="width: 300px;" value="#{eventController.searchedInput}" placeholder="Search">
				    <p:ajax event="keyup" update="userList" />
				    <p:ajax listener="#{eventController.searchUser}" update="userList" />
				</p:inputText>
				TODO: Add "rendered" condition and show the list only if there are more than one results
				<p:selectOneListbox style="max-height: 60px; overflow-y: scroll; width: 300px;" id="userList">
				    <f:selectItems value="#{eventController.searchedUser.userEmail.userFirstName} #{eventController.searchedUser.userEmail.userLastName} (#{eventController.searchedUser.userEmail.userEmail})" />
				</p:selectOneListbox>
			    </div>-->
			</div>
		    </p:outputPanel>
		</h:form>
	    </p:layoutUnit>
	    <p:layoutUnit position="south" size="80" resizable="false" closable="false" collapsible="false">
		<ui:include src="/includes/footer.xhtml"/>
	    </p:layoutUnit>
        </p:layout>
    </h:body>
</html>

